<template>
	<div>
		<!-- 无内容时展示 -->
		<div v-if="books.length == 0" style="padding-top: 5%;">
			<h1>{{ if_no }}</h1>
		</div>
		<!-- 分类列表 -->
		<div class="book-sort-top" 
		v-for="book in books" 
		:key="book.id"
		v-else-if="books.length != 0">
			<!-- 图片 -->
			<div class="book-sort-top-img">
				<img :src="baseURL+book.bigImgUrl" style="width: 100%;">
			</div>
			<!-- 图书信息 -->
			<div class="book-sort-top-content">
				<!-- 标题 -->
				<div class="book-title" @click="$router.push('/book_detail'+book.id)">
					<h3>{{ book.title }}</h3>
				</div>
				<!-- 概括 -->
				<div class="book-summary" @click="$router.push('/book_detail'+book.id)">
					<span>{{ book.brief }}</span>
				</div>
				<!-- 相关信息 -->
				<div class="book-info">
					<span author>作者：{{ book.author }}</span>
					<span bookConcern>出版社：{{ book.bookConcern }}</span>
					<span publishDate>出版日期： {{ book.publishDate }}</span>
				</div>
				<!-- 价格 -->
				<div class="book-price">
					<span price>￥{{ book.price | realPrice(book.discount) }} </span>
					<span origin-price>￥{{ book.price | realPrice()}}</span>
					<span discount>[ {{ book.discount*10 }}折 ]</span>
				</div>
				<!-- 加入购物车按钮 -->
				<div class="book-option">
					<div button>
						<el-button type="primary" @click="check_shop(book)">加入购物车</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapMutations} from 'vuex'
	
	export default {
		data() {
			return {
				baseURL: 'http://111.229.37.167/'
			}
		},
		props: ['books','if_no'],
		methods: {
			check_shop(book) {
				// 判断当前是否登录
				if (this.$store.state.logreg.active_user){
					
				}else{
					alert('请先登录!')
					return
				}
				// 获取购物车内已有的商品id
				let ids = [];
				for (let i of this.$store.state.cart.shop_cart[this.$store.state.logreg.active_user]){
					ids.push(i.id)
				}
				// 检测购物车内是否已有该商品
				let have = ids.indexOf(book.id);
				// 如果没有就直接加入
				if (have == -1){
					this.add_shop({
						id: book.id,
						img: this.baseURL+book.bigImgUrl,
						title: book.title,
						num: '1',
						price: this.$realPrice(book.price,book.discount),
						username: this.$store.state.logreg.active_user
					})
					this.$message({
						message: '添加成功',
						center: true,
						duration: 3000
					})
				}
				// 如果有就跳转到购物车页面
				else{
					this.$message({
						type: 'warning',
						message: '已在购物车内，请勿重复添加！',
						center: true,
						duration: 3000
					})
				}
			},
			...mapMutations('cart',[
				'add_shop'
			])
		}
	}
</script>

<style lang="less" scoped>
	.book-sort-page {
		text-align: center;
	}
	
	.book-sort-top {
		width: 100%;
		overflow: hidden;
		
		.book-sort-top-content{
			position: relative;
			float: left;
			width: 75%;
		}
		.book-sort-top-img {
			float: left;
			width: 25%;
		}
		.book-title {
			padding-left: 4%;
			padding-top: 5%;
			
			:hover {
				text-decoration: underline;
				cursor: pointer;
			}
		}
		.book-summary {
			text-align: left;
			padding: 3% 4%;
			
			:hover {
				text-decoration: underline;
				cursor: pointer;
			}
		}
		.book-info {
			display: flex;
			justify-content: space-between;
			padding-left: 4%;
			padding-right: 30%;
		}
		.book-price {
			text-align: left;
			padding-top: 6%;
			padding-left: 4%;
			
			[price] {
				font-size: 2.5rem;
				color: red;
			}
			[origin-price] {
				text-decoration: line-through;
				font-size: 1rem;
				position: relative;
				top: -6px;
				left: 5px;
				opacity: .6;
			}
			[discount] {
				position: relative;
				bottom: 3px;
				padding-left: 3%;
			}
		}
		.book-option {
			height: 40px;
			position: absolute;
			right: 30%;
			bottom: 3%;
			
			[button] {
				position: relative;
				left: 0%;
				bottom: 0;
			}
		}
	}
</style>
